<template>
    <div class="game_item">
        <div class="game_box" @click="onPlayGame(props.item)">
            <n-image width="100%" preview-disabled :src="settings.backend_upload + props.item.gamePicturePC"
                fallback-src="/logo.png" />
            <!-- <img :src="imgPrefix + v.gamePicturePC"> -->
            <div class="game_name">
                <n-tooltip trigger="hover">
                    <template #trigger>
                        <span class="text_hidden">{{ unserialize(props.item.name, true) }}</span>
                    </template>
                    {{ unserialize(props.item.name, true) }}
                </n-tooltip>

            </div>
            <span class="hot">
                <iconpark-icon v-if="props.item.is_hot" name="hot1" size="1rem"></iconpark-icon>
            </span>

            <span class="collect" v-if="hasLogin">
                <iconpark-icon :name="allCollected.includes(props.item.id) ? 'shoucangun' : 'shoucang'" size="1rem"
                    @click.stop="reqCollect(props.item)"></iconpark-icon>
            </span>

        </div>
        <div v-if="props.item.ismMintain === 1" class="masking_layer">
            <iconpark-icon class="maskin_img" name="padlock1" size="28" />
            <span>{{ t('game_page_coming_soon') }}</span>
            <span>{{ t('game_page_stay_tuned') }}</span>
        </div>
    </div>
    <Loading v-model:visible="isLoading"></Loading>
</template>

<script setup lang='ts' name="GameItem">
import pinia from '@/store/index';
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { User } from '@/store/user';
import { Page } from '@/store/page';
import { NetPacket } from '@/netBase/NetPacket';
import { Local } from '@/utils/storage';
import H5Websocket from "@/net/Net1";
import { MessageEvent2 } from '@/net/MessageEvent2';
import { NetMsgType } from '@/netBase/NetMsgType';
import { Message } from '@/utils/discreteApi';
import { useRoute, useRouter } from 'vue-router';
import { ref } from 'vue';
import Loading from '@/components/Loading.vue'
const route = useRoute()
const router = useRouter()
const { allCollected, hasLogin } = storeToRefs(User(pinia));
const { lang, settings } = storeToRefs(Page(pinia));
const { t } = useI18n();
const props: any = defineProps({
    item: {
        type: Object,
        default: {}
    },

})

const isLoading = ref(false)
const onPlayGame = async (v: any) => {
    if (!Local.get('user')) {
        await User(pinia).setLogin(true)
        return
    }
    MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_3rd_game_login_result, gameUrlResult);
    let langObj: any = {
        'en': 3,
        'vi': 2,
        'zh': 1
    }
    // export enum ClientType {
    //     PCWeb = 1,
    //     MobileWeb,
    //     Android,
    //     IOS
    // }
    // let gameKindId = {
    //     // key为我方自定义的游戏类型  value为获取游戏链接需要的值
    //     '1': '0', // 1为电子
    //     '2': '7', // 2为捕鱼
    //     '': '18',  // 塔罗牌
    //     '': '9',  // 街机游戏
    //     '': '12',  // 宾果游戏
    // }
    isLoading.value = true
    let tb = NetPacket.req_3rd_game_login();
    tb.agentId = v.agentId;
    tb.kindId = route.query.venue_id // state.kindId;
    tb.gameId = v.gameId;
    tb.lang = langObj[lang.value];
    tb.device_type = 1
    H5Websocket.sendMessageHandler(tb);
}
//  打开游戏
const gameUrlResult = (message: any) => {
    MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_3rd_game_login_result, null);
    isLoading.value = false
    if (message.code != 0) {
        Message.error(message.msg)
        return
    }
    if (message.url.indexOf('<!doctype html>') != -1) {
        const blob = new Blob([message.url], { type: 'text/html' });
        message.url = URL.createObjectURL(blob);
    }
    router.push({
        path: "/openGame",
        query: {
            src: message.url
        }
    });
}
// 添加取消收藏
const reqCollect = async (game: any) => {
    MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_modify_collect, resCollect);
    const query = NetPacket.req_modify_collect()
    query.agentId = game.agentId || game.id  //id 为厂商游戏  例如 体育 真人之类
    query.id = game.id
    query.type = allCollected.value.includes(query.id) ? 1 : 0
    Local.set('gameId', query.id)
    H5Websocket.sendMessageHandler(query);
}
// 解析游戏名和平台名
const unserialize = (v: any, isPlatform: boolean) => {
    let obj: any = {
        en: 'en-US',
        zh: 'zh-CN',
        vn: 'vi-VN'
    }
    if (isPlatform) {
        v = JSON.parse(v)
    }

    return v[obj[lang.value]]
}


const resCollect = async (data: any) => {
    // MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_modify_collect, null);
    console.log('resCollect', data);
    if (data.rlt == 0) {
        let gameId = Local.get('gameId')
        if (allCollected.value.includes(gameId)) {
            let arr = allCollected.value.filter((e: Number) => e != gameId)
            await User(pinia).getCollected(arr);
            Message.success(t('game_page_collect_success_cancel'))
        } else {
            let arr = [...allCollected.value, gameId]
            await User(pinia).getCollected(arr);
            Message.success(t('game_page_collect_success'))
        }
    } else if (data.rlt == 1) {
        Message.warning(t('game_page_collect_success_limit'))
    } else {
        Message.error(t('Unknown_error'))
    }
}
</script>
<style lang='less' scoped>
.game_item {
    position: relative;
}

.game_box {
    width: 164px;
    height: 190px;
    position: relative;
    background-color: #222;
    cursor: pointer;
    line-height: 1;
    border-radius: 15px;

    >.game_img {
        width: 164px;
        height: 164px;

    }

    >.hot,
    .collect {
        position: absolute;
        left: 10px;
        top: 10px;
        padding: 5px;
        border-radius: 7px;
        background: rgba(0, 0, 0, .5);
        display: flex;
        justify-content: center;
        align-items: center
    }

    .collect {
        left: auto;
        right: 10px;

    }

    >.game_name {
        width: 100%;

        display: flex;
        justify-content: space-between;
        padding: 5px 8px;
        position: absolute;
        text-align: center;
        bottom: 0;
        left: 0;

        >.text_hidden {
            width: 80%;
            color: #fff;
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    }
}

.masking_layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(1px);
    background: rgba(0, 0, 0, 0.6);
    font-family: PingFang SC;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: #ffffff;


    .maskin_img {
        width: 32px;
        height: 32px;
        margin-bottom: 8px;
    }

}
</style>